<template>
<div style="width: 100%;height:100%;background-color: #f5f6f7">
  <div style="
            padding: 10px 10px 10px 10px;
            box-shadow: 5px 5px 30px #b0b0b0;
            border-radius: 30px;
            width: 50%;
            top: 100px;bottom: 0;left: 0;right: 0;
            background-color: white;
            position: absolute;
            margin: auto">
    <div style="height: 20px"></div>
    <p class="f-style"><i>已有分类:</i></p>
    <div style="margin-bottom: 20px">

    <span v-for="(category,i) in categories" :style="styles[i]">
    {{category.categoryName}}
    </span>
    </div>
    <span class="f-style">添加分类:</span>
    <div style="height: 20px"></div>
    <el-tag
        size="large"
        v-for="(tag,i) in tags"
        :key="tag"
        closable
        type="success"
        @close="deleteTag(i)"
    >
      {{tag}}
    </el-tag><br>
    <el-input style="width:180px" v-model="name" placeholder="输入要添加的分类："></el-input>
    <el-button
        size="large"
        style="margin: 10px 10px 20px 30px;width: 100px;border-width: 2px"
        @click="addTag()"
        round>生成标签</el-button>
    <el-button
        size="large"
        style="margin: 10px 10px 20px 30px;width: 100px;border-width: 2px"
        @click="postTags"
        round>提交分类</el-button>

  </div>

</div>

</template>

<script setup>
import {inject,onMounted} from "vue-demi";
import {reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";


const user = ref({})
const categories = ref([])
const name = ref('')
const tags = ref([])
const styles = ref([])
const reload = inject('reload')

onMounted(async ()=>{
  await getCategories()
  for(let i =0 ;i　< categories.value.length; i++){
    let r = Math.random() * 255
    let g = Math.random() * 255
    let b = Math.random() * 255
    let size = Math.random() * 40 + 30
    styles.value.push('color:rgb('+ r + ',' + g + ','+ b  +  ');font-size:'+size+'px;font-style: italic;font-weight: bold;margin-left: 20px')
    // console.log(i)
  }
})


//生成标签
const addTag = ()=>{
  tags.value.push(name.value)
  name.value = ''
}

//去除标签
const deleteTag = (i)=>{
  if (i == 0 ){
    tags.value = []
    return
  }

     tags.value= tags.value.splice(i-1,1)
}

//获取分类
const getCategories = async ()=>{
  let result = await request.get('article/category')
  let data = result.data
  if(data.code === 200){
     categories.value = data.data
    console.info(data.msg)
  }else{
    console.warn(data.msg)
  }
}

//提交分类
const postTags = async ()=>{
  let result = await request.post('article/addcategories',tags.value)
  let data = result.data
  if(data.code === 200){
    console.info(data.msg)
    reload()
  }else {
    console.warn(data.msg)
    ElMessage.error(data.msg)
  }
}

</script>

<style scoped>
.f-style{
  font-weight: bold;
  font-size: 30px;
}
</style>